<template>
  <div class="solutionInfo">
    <div class="solution">
      <div class="left">
        <div class="left-menu">
          <div class="top">
            <div class="item-title">全部文档</div>
            <div class="search">
              <el-input v-model="filterText" placeholder="搜索..." suffix-icon="search" />
            </div>
          </div>
          <el-tree
            ref="treeRef"
            :data="dataList"
            :props="defaultProps"
            node-key="helpId"
            default-expand-all
            highlight-current
            :current-node-key="currentKey"
            :filter-node-method="filterNode"
            @current-change="handleNodeChange"
          />
        </div>
      </div>
      <div class="right">
        <div class="header">
          帮助中心 <span v-if="navs"> &gt; {{ navs }}</span> &gt;
          {{ currentInfo.helpName }}
        </div>
        <div class="content">
          <div class="title">{{ currentInfo.helpName }}</div>
          <div class="time" v-if="currentInfo.createTime">
            发表于：{{ currentInfo.createTime }}
          </div>
          <div v-html="currentInfo.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { helpList } from "@/api/other";
import { useRoute } from "vue-router";
const route = useRoute();

const filterText = ref(""); // 菜单搜索
const treeRef = ref();
const defaultProps = ref<any>({
  children: "children",
  label: "helpName",
  id: "helpId",
});
const dataList = ref<any>([]); // 问题列表
const currentKey = ref(""); // 默认展开节点
const currentInfo = ref<any>({}); // 当前选中节点信息
const navs = ref("");

onMounted(() => {
  getHelpList();
});

watch(filterText, (val) => {
  treeRef.value!.filter(val);
});

// 获取帮助中心列表
const getHelpList = () => {
  helpList({}).then((res: any) => {
    dataList.value = res.data;
    const helpId = route.query.helpId;
    if (helpId) {
      dataList.value.forEach((item: any) => {
        item.children?.forEach((child: any) => {
          if (child.helpId === helpId) {
            const chooseChild = getFristChild(child);
            currentKey.value = chooseChild.helpId;
            currentInfo.value = chooseChild;
          }
        });
      });
    }
  });
};

// 过滤筛选
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data.helpName.includes(value);
};

// 点击问题
const handleNodeChange = (data: any) => {
  let row = Object.assign({}, data);
  const chooseChild = getFristChild(row);
  currentKey.value = chooseChild.helpId;
  currentInfo.value = chooseChild;
  let nav = getParentNamesById(dataList.value, row.helpId);
  navs.value = nav.join(" > ");
};

//递归找到最后一级的第一个孩子
const getFristChild = (father: any) => {
  if (father.children) {
    return getFristChild(father.children[0]);
  } else {
    return father;
  }
};

// 递归查找父级helpName
const getParentNamesById = (tree: any = [], helpId: any, parentNames = []) => {
  for (const node of tree) {
    if (node.helpId == helpId) {
      return parentNames;
    }
    if (node.children) {
      const result = getParentNamesById(
        node.children,
        helpId,
        parentNames.concat(node.helpName)
      );
      if (result) {
        return result;
      }
    }
  }
  return [];
};
</script>
<style lang="less" scoped>
.solutionInfo {
  display: flex;
  justify-content: center;
  .solution {
    width: 1200px;
    display: flex;
    .left {
      width: 200px;
      background: #f6f8fc;
      box-shadow: -5px 5px 20px 0px rgba(227, 232, 240, 0.5);
      .left-menu {
        height: 100%;
        .top {
          margin-bottom: 20px;
          .item-title {
            padding: 10px 20px;
            font-weight: 600;
          }
          .search {
            padding: 0 20px;
          }
        }
      }
    }
    .right {
      margin-left: 20px 10px;
      flex: 1;
      padding: 20px;
      border: 2px solid #fff;
      background: #fff;
      box-shadow: -5px 5px 20px 0px rgba(227, 232, 240, 0.5);
      .header {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #e3e8f0;
      }
      .content {
        padding: 20px 0;
        .title {
          color: #313131;
          font-size: 24px;
          font-weight: 600;
        }
        .time {
          color: #909090;
          font-size: 14px;
          margin: 20px 0;
        }
      }
    }
  }
}
::v-deep .el-tree {
  background-color: transparent;
  .el-tree-node .el-tree-node__content {
    min-height: 40px;
    line-height: 40px;
    color: #313131;
  }
  .is-current > .el-tree-node__content {
    color: #4098ff !important;
    background: linear-gradient(270deg, #fff 20.83%, #ffffff00 100%);
  }
}
</style>
